import { useNavigate } from "react-router";
import styles from "./style.module.css";

type BlockItemProps = {
  icon: any;
  text: string;
  to?: string;
};
const BlockItem = (props: BlockItemProps) => {
  const navigate = useNavigate();
  const { icon, text } = props;
  const handleClick = () => {
    if (props.to) {
      navigate({ pathname: props.to });
    }
  }
  return (
    <div
      className="flex flex-col justify-center items-center w-[25%] text-center gap-y-[15px]"
      onClick={handleClick}
    >
      <p className={styles.icon}>
        <img src={icon} alt="" />
      </p>
      <p className={styles.text}>{text}</p>
    </div>
  );
};

export default BlockItem;
